<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!--引入layui的样式-->
<link rel="stylesheet" type="text/css" href="../layui/css/layui.css" />
<!-- 引入layui的脚本文件 -->
<script src="../layui/layui.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
	<table id="demo" lay-filter="test"></table>
	<!-- 工具栏模板：头部 -->
	<script type="text/html" id="toolbarDemo1"> 
         <div class="layui-btn-container">

          </div>

       </script>
	<!-- 工具栏模板：行内-->
	<script type="text/html" id="toolbarDemo2"> 
         <div class="layui-btn-container">
         <button class="layui-btn layui-btn-sm" lay-event="update">编辑</button> 
         <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button> 
          </div>

       </script>

	<!-- 修改的留言表单 -->
	<div id="updateDiv" style="display: none;">
		<form class="layui-form" lay-filter="updateForm" id="updateForm">
			<div class="layui-form-item">
				<label class="layui-form-label">id</label>
				<div class="layui-input-inline">
					<input type="text" name="lybld" placeholder="请输入"
						autocomplete="off" class="layui-input layui-disabled">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">回复状态</label>
				<div class="layui-input-inline">
					<input type="radio" name="mstate" value="未回复" title="未回复">
					<input type="radio" name="mstate" value="已回复" title="已回复">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">回复内容</label>
				<div class="layui-input-inline">
					<textarea name="remark" required lay-verify="required"
						placeholder="请输入" class="layui-textarea"></textarea>
				</div>
			</div>

			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit lay-filter="subBtnUpdate">立即提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>

		</form>
	</div>
	<!-- 修改的表单结束 -->
	<!-- 脚本开始 -->
	<script>
       layui.use([ 'table', 'form', 'layer' ], function() {
			var table = layui.table;
			var form = layui.form;
			var layer = layui.layer;
			var $ = layui.$;
			
			//第一个实例
			table.render({
				elem : '#demo',
				url : 'MessageAdminServlet?method=getmessage', //数据接口
				id : "idTest",
				toolbar : '#toolbarDemo1',
				method:"post",//请求方式
				page:true,//开启分页
				cols : [ [ //表头
				{
					field : 'lybld',
					title : 'ID',
					width : 80
				}, {
					field : 'name',
					title : '名字',
					width : 80
				}, {
					field : 'phone',
					title : '电话',
					width : 80
				}, {
					field : 'email',
					title : '邮箱',
					width : 177
				}, {
					field : 'content',
					title : '内容',
					width : 120
		       },{
		    	   field : 'replytime',
					title : '回复时间',
					width : 120
		       },{
		    	   field : 'remark',
					title : '状态',
					width : 120
		       },{
		    	   field : 'mstate',
					title : '回复',
					width : 120
		       },{
		    	   field : 'showtime',
					title : '留言时间',
					width : 120
		       },{
		    	   title : '选项',
					width : 177,
					toolbar:'#toolbarDemo2'
		       }

				] ]
			});
            //表格渲染结束
       //头部-工具栏
       table.on('toolbar(test)', function(obj){
    	   var checkStatus = table.checkStatus(obj.config.id); 
    	   switch (obj.event) {
    	   case 'add': 
    		   layer.open({
    			   type : 1, 
    			   content : $('#addmess') 
    			   ////这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响 
    		   });
    		   break;
    	   }
       });
            //行内工具栏 修改和删除
            table.on('tool(test)', function(obj){
            	var data = obj.data;//当前行内数据 
            	switch (obj.event){
            	case 'delete': 
            		//layer.msg('删除'); 
            		layer.confirm('确认删除？'+data.lybld, function(index) { 
            			obj.del(); //删除对应行（tr）的DOM结构，并更新缓存 
            			layer.close(index); 
            			//向服务端发送删除指令 
            		$.post("MessageAdminServlet?method=delMessage",{
            			"lybld" : data.lybld 
            			
            			}, function(res){
            				
            				layer.msg(res.msg); 
            	
      
            			}, "json")
            	
            });
            		break;
            	case 'update': 
            		form.val("updateForm", data); 
            		layer.open({
            			type : 1, 
            			
            			content : $('#updateDiv') 
            			
							//这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响 
            		
            			});
            		break;
            	}
            });
        //监听表单提交  修改
        form.on('submit(subBtnUpdate)', function(data){
        	var url = "MessageAdminServlet?method=updatemessage"; //请求地址 
        	var str = $("#updateForm").serialize(); //请求参数,表单中的数据,serialize序列化 
        	//ajax请求服务器,判断结果 
               $.post(url, str, function(res){
	               console.log(res); 
	            if (res.code == 0){
		               layer.msg(res.msg, {
			            time:1000
                     },function(){
			          layer.closeAll();//关闭所有窗口 

			             table.reload('idTest', {})//表格重载 
		        })
                    }
                   },"json");
                       return false; 

        });//end
        
       });
            	
            	
            	
            	
       </script>


</body>
</html>